.e-onboarding__progress-bar {
	display: flex;
	justify-content: center;
	margin-block-end: 125px;
	flex-wrap: wrap;
	gap: 15px 22px;

	&-item {
		display: flex;
		align-items: center;
		color: $platform-mid-gray;
		font-size: 0.75rem;

		&-icon {
			display: inline-block;
			font-family: 'DM Serif Display', serif;
			text-align: center;
			width: 1.1rem;
			height: 1.1rem;
			line-height: 1rem;
			font-size: 0.75rem;
			font-weight: bold;
			border-radius: 50%;
			border: 1px solid $platform-mid-gray;
			margin-inline-end: 8px;
			flex-shrink: 0;

			&::after {
				content: attr(data-item-count);
			}
		}

		&:not(:last-child) {

			&:after {
				font-family: 'eicons';
				margin-inline-start: 22px;
				content: '\e89e'; // eicon-angle-right
			}
		}

		&--active {
			color: $e-primary-bold;
		}

		&--active,
		&--completed {

			.e-onboarding__progress-bar-item-icon {
				color: $white;
				border-color: $e-primary-bold;
				background-color: $e-primary-bold;
			}
		}

		&--skipped,
		&--completed {
			cursor: pointer;
		}

		&--skipped {

			.e-onboarding__progress-bar-item-icon {
				color: $white;
				background-color: $platform-mid-gray;
			}

		}
	}
}
